<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父组件和子组件</title>
</head>
<body>
<div id="app">
    <parent></parent>
    <!--<child></child>-->
</div>

<script type="module">
    import {createApp, defineComponent} from "../../../js/vue.esm-browser.js";

    // 思考：定义组件先写外层还是内层？
    let child = defineComponent(
        {
            template:
                `
                <h1>这是子组件</h1>
                `
        }
    );

    let parent = defineComponent(
        {
            components:
                {
                    // 在组件中定义的组件被成为子组件——child 是 parent 的子组件

                    child: child
                },
            template:
                `
                <h1>这是父组件</h1>
                <child></child>
                `
        }
    );

    let app = createApp(
        {
            components:
                {
                    // parent 是 Vue 对象的子组件
                    // 当注册组件的名称和组件定义的名子相同的时候，可以简写。    ES6
                    parent
                },
            setup() {
                return {}
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>